import {
  StyleSheet,
  View,
  ScrollView,
  Image,
  TouchableOpacity,
  Modal,
  LayoutAnimation
} from 'react-native'
import React, { useState } from 'react'
import { observer } from 'mobx-react-lite'
import { Text } from 'react-native-paper'
import { homeStore } from '@/store/home'
import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'

import icon_arrow from '@/assets/images/icon_arrow.png'
import icon_add from '@/assets/images/icon_close_modal.png'
import icon_delete from '@/assets/images/icon_delete.png'
import type { CategoryItem } from '@/types/home'

const CategoryList = observer(() => {
  const [activeIndex, setActiveIndex] = useState(0)

  const onActiveChange = (index: number) => {
    setActiveIndex(index)
  }

  // modal是否显示
  const [visible, setVisible] = useState(false)
  // modal 关闭的回调
  const hideModal = () => {
    // 动画函数
    dropDownTop.value = withTiming(-15, { duration: 200 })
    setVisible(false)
  }
  // modal 显示的回调
  const showModal = () => {
    setVisible(true)
    // 动画函数
    dropDownTop.value = withTiming(0, { duration: 200 })
  }

  // 动画参数
  const dropDownTop = useSharedValue(-15)
  // 动画样式
  const dropDownStyle = useAnimatedStyle(() => ({
    marginTop: dropDownTop.value
  }))

  // 控制是否编辑
  const [edit, setEdit] = useState(false)

  // 删除我的频道列表中单项到推荐频道的回调
  const onDeleteChannelItem = (channel: CategoryItem) => {
    if (!edit || channel.default) {
      // 非编辑模式
      return
    }
    LayoutAnimation.easeInEaseOut()
    homeStore.changeCategoryList(channel, 'delete')
  }

  // 添加推荐频道列表中单项到我的列表中的回调
  const onAddChannelItem = (channel: CategoryItem) => {
    if (!edit) {
      // 非编辑模式
      return
    }
    LayoutAnimation.easeInEaseOut()
    homeStore.changeCategoryList(channel, 'add')
  }
  return (
    <View style={styles.container}>
      {/* 分类横向列表 */}
      <ScrollView
        horizontal={true}
        showsHorizontalScrollIndicator={false}
        style={styles.scrollView}
      >
        {homeStore.categoryList
          .filter(item => item.isAdd)
          .map((item, index) => (
            <TouchableOpacity
              key={item.name}
              activeOpacity={0.7}
              onPress={() => onActiveChange(index)}
            >
              <Text style={[styles.nameTxt, activeIndex === index && styles.selectedTxt]}>
                {item.name}
              </Text>
            </TouchableOpacity>
          ))}
      </ScrollView>
      {/* 下拉箭头 */}
      <TouchableOpacity style={styles.arrowBtn} activeOpacity={0.7} onPress={showModal}>
        <View style={styles.emptyView}></View>
        <Image source={icon_arrow} style={styles.iconArrow}></Image>
      </TouchableOpacity>
      {/* Modal */}
      <Modal
        transparent
        statusBarTranslucent
        visible={visible}
        animationType="fade"
        onRequestClose={hideModal}
      >
        <ScrollView style={styles.modalView}>
          <Animated.View style={[styles.dropDown, dropDownStyle]}>
            {/* 我的频道 */}
            <View style={styles.myChannel}>
              {/* 头部 */}
              <View style={styles.titleLayout}>
                <Text style={styles.title}>我的频道</Text>
                <Text style={styles.btnTxt}>点击进入频道</Text>
                <TouchableOpacity
                  style={styles.editBtn}
                  activeOpacity={0.7}
                  onPress={() => setEdit(!edit)}
                >
                  <Text style={styles.editTxt}>{edit ? '完成编辑' : '点击编辑'}</Text>
                </TouchableOpacity>
                {/* 上拉箭头 */}
                <TouchableOpacity
                  style={{ paddingLeft: 15 }}
                  onPress={hideModal}
                  activeOpacity={0.7}
                >
                  <Image
                    source={icon_arrow}
                    style={{
                      tintColor: '#999',
                      width: 18,
                      height: 18,
                      transform: [{ rotate: '90deg' }]
                    }}
                  ></Image>
                </TouchableOpacity>
              </View>
              {/* 内容 */}
              <View style={styles.channelContainer}>
                {homeStore.categoryList
                  .filter(item => item.isAdd)
                  .map(item => (
                    <TouchableOpacity
                      key={item.name}
                      style={[styles.channelItemBtn, item.default && styles.defaultChannelItemBtn]}
                      onPress={() => onDeleteChannelItem(item)}
                    >
                      <Text style={styles.channelItemTxt}>{item.name}</Text>
                      {!item.default && edit && (
                        <Image source={icon_delete} style={styles.iconDelete}></Image>
                      )}
                    </TouchableOpacity>
                  ))}
              </View>
            </View>
            {/* 推荐频道 */}
            <View style={styles.recommendChannel}>
              {/* 头部 */}
              <View style={styles.titleLayout}>
                <Text style={styles.title}>推荐频道</Text>
                <Text style={styles.btnTxt}>点击添加频道</Text>
              </View>
              {/* 内容 */}
              <View style={styles.channelContainer}>
                {homeStore.categoryList
                  .filter(item => !item.isAdd)
                  .map(item => (
                    <TouchableOpacity
                      key={item.name}
                      style={[styles.channelItemBtn, item.default && styles.defaultChannelItemBtn]}
                      onPress={() => onAddChannelItem(item)}
                    >
                      {edit && <Image source={icon_add} style={styles.iconAdd}></Image>}
                      <Text style={styles.channelItemTxt}>{item.name}</Text>
                    </TouchableOpacity>
                  ))}
              </View>
            </View>
          </Animated.View>
        </ScrollView>
      </Modal>
    </View>
  )
})

export default CategoryList

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    width: '100%',
    height: 42,
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 14,
    marginBottom: 6
  },
  scrollView: {
    height: '100%',
    paddingRight: 14
  },
  arrowBtn: {
    position: 'absolute',
    right: 14,
    height: '100%',
    flexDirection: 'row',
    alignItems: 'center'
  },
  iconArrow: {
    width: 18,
    height: 18,
    transform: [{ rotate: '-90deg' }],
    backgroundColor: '#fff'
  },
  emptyView: {
    width: 10,
    height: '100%',
    backgroundColor: 'rgba(255, 255, 255, 0.7)'
  },
  nameTxt: {
    height: '100%',
    textAlignVertical: 'center',
    fontSize: 18,
    width: 64,
    color: '#999'
  },
  selectedTxt: {
    fontWeight: 'bold',
    color: '#333'
  },
  modalView: {
    width: '100%',
    height: '100%',
    marginTop: 80,
    backgroundColor: 'rgba(0, 0, 0, 0.6)'
  },
  dropDown: {
    width: '100%',
    backgroundColor: '#fff'
  },
  myChannel: {
    width: '100%'
  },
  recommendChannel: {
    width: '100%'
  },
  titleLayout: {
    flexDirection: 'row',
    height: 60,
    backgroundColor: '#fff',
    alignItems: 'center',
    paddingHorizontal: 15
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold'
  },
  btnTxt: {
    flex: 1,
    marginLeft: 15,
    color: '#999'
  },
  editBtn: {
    backgroundColor: '#f5f5f5',
    borderRadius: 20
  },
  editTxt: {
    paddingHorizontal: 12,
    paddingVertical: 5,
    color: '#6b93db'
  },
  channelContainer: {
    width: '100%',
    flexDirection: 'row',
    flexWrap: 'wrap',
    paddingHorizontal: 15,
    justifyContent: 'flex-start',
    columnGap: 12
  },
  channelItemBtn: {
    marginBottom: 15,
    borderWidth: 1,
    borderColor: '#ececec',
    borderRadius: 5,
    width: 80,
    height: 36,
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row'
  },
  defaultChannelItemBtn: {
    borderWidth: 0,
    backgroundColor: '#f5f5f5'
  },
  channelItemTxt: {
    fontSize: 16
  },
  iconAdd: {
    width: 14,
    height: 14,
    resizeMode: 'contain',
    tintColor: '#a2a2a2',
    transform: [{ rotate: '45deg' }],
    marginRight: 3
  },
  iconDelete: {
    width: 16,
    height: 16,
    position: 'absolute',
    top: -6,
    right: -6,
    resizeMode: 'contain'
  }
})
